<template>
  <div class="manageCom">
    <div class="clearBtn">
      <el-popconfirm title="确定清除组件？" @onConfirm="clearAll">
        <el-button slot="reference" type="text">清除组件</el-button>
      </el-popconfirm>
    </div>

    <draggable :list="config" class="com-group" :animation="200">
      <div class="com-group-item" v-for="(item, index) in config" :key="index">
        <i class="el-icon-s-unfold"></i>
        <span>{{ item.name }}</span>
        <el-popconfirm style="float:right;line-height:40px;" title="确定清除组件？" @onConfirm="deleteCom(index)">
          <i slot="reference" class="el-icon-delete"></i>
        </el-popconfirm>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ['value'],
  data() {
    return {
      config: this.value ? this.value : {},
      rules: {
        title: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
      }
    }
  },
  watch: {
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    },
    value(newVal) {
      this.config = newVal;
    },
  },
  methods: {
    clearAll() {
      this.config = []
    },
    deleteCom(index) {
      this.config.splice(index, 1)
    }
  }
}
</script>

<style lang="less">
.manageCom {
  padding: 12px 16px;
  .clearBtn {
    text-align: right;
  }
  .com-group {
    // padding: 12px 16px 0;
    .com-group-item {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      font-size: 14px;
      color: #323233;
      border-radius: 2px;
      background-color: #fff;
      box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
      box-sizing: border-box;
      cursor: move;
      & + .com-group-item {
        margin-top: 12px;
      }
    }
  }
}
</style>
